<template>
  <el-select
    ref="icon_select"
    v-model="valueModel"
    :placeholder="placeholder"
    :clearable="true"
    style="width: 100%"
    @clear="handleClear"
  >
    <el-option
      style="height: auto;background-color: #fff;max-width: 270px;"
      :value="valueModel"
    />
    <div
      class="icon-box"
      style="max-width: 270px;"
    >
      <div
        v-for="item in iconClasses"
        :key="item"
        class="icon-item"
        :class="{active: 'iconfont ' + item === value}"
        @click="changeIcon(item)"
      >
        <i :class="'iconfont ' + item" />
      </div>
    </div>
  </el-select>
</template>

<script>
import {getIconClasses} from "@/utils/icon";
/**
 * 图标选择
 */
export default {
  name: "ErpFormInput",
  components: {
  },
  props: {
    /**
     * 标题
     * @public
     */
    title: {
      type: String,
      default: '',
    },
    /**
     * 字段
     * @public
     */
    field: {
      type: String,
      default: ''
    },
    /**
     * 值
     * @public
     */
    value: {
      type: String,
      default () {
        return '';
      }
    },
    /**
     * 属性，【未使用】
     * @public
     */
    props: {
      type: Object,
      default () {
        return {};
      }
    },
  },
  data () {
    return {
      iconClasses: []
    };
  },
  computed: {
    valueModel: {
      get () {
        return this.value;
      },
      set (val) {
        this.$emit('value-change', val);
      }
    },
    placeholder () {
      let placeholder = this.$t('common.pleaseSelect');
      if (this.props && this.props.placeholder) {
        placeholder = this.props.placeholder;
      }
      return placeholder;
    }
  },
  mounted() {
    this.getIconClasses();
  },
  methods: {
    /**
     * 选择图标
     * @private
     * @param {string} icon 图标名
     */
    changeIcon (icon) {
      this.valueModel = 'iconfont ' + icon;
    },
    /**
     * 获取图标的类名
     * @private
     */
    getIconClasses () {
      this.iconClasses = getIconClasses();
    },
    /**
     * 清除图标
     * @public
     */
    handleClear () {
      this.valueModel = '';
    }
  },
};
</script>

<style lang="scss" scoped>
$primaryColor: var(--primary-color);
.icon-box{
    display: flex;
    flex-wrap: wrap;
    .icon-item{
        width: 35px;
        height: 35px;
        border: 1px solid #d4d7e0;
        border-radius: 3px;
        text-align: center;
        margin: 5px;
        i{
            color: #4e4f53;
            font-size: 16px;
        }
        &.active{
            border: 1px solid $primaryColor;
            i{
                color: $primaryColor;
            }
        }
    }
}
</style>
